import React, { useState, useEffect } from 'react'
import './index.modules.scss'
import SearchView from '@/components/searchView/index'
import {
  Space,
  Table,
  Button,
  Modal,
  Card,
  message,
  Input,
  Popconfirm,
  Pagination,
  Divider,
  Checkbox
} from 'antd'
import { changeCount } from '@/http/api/store'
import {
  deliverList,
  deliverListDelete,
  deliverListCreateExcel,
  deliverListSerach
} from '@/http/api/quality'
import dayjs from 'dayjs'
let pageData = {
  page: 1,
  size: 10,
  total: 0,
  status: 1,
  appid: localStorage.getItem('appid')
}
let _id = ''
let typeList = [
  {
    title: '收货门店',
    type: 'inpute',
    model: 'storeName'
  },
  {
    title: '负责人',
    type: 'inpute',
    model: 'linkman'
  },
  {
    title: '质保编号',
    type: 'inpute',
    model: 'filmNo'
  },
  {
    title: '联系方式',
    type: 'inpute',
    model: 'phone'
  },
  {
    title: '发货时间',
    type: 'inpute',
    model: 'create_time'
  },
  {
    title: '产品类型',
    type: 'inpute',
    model: 'filmType'
  },
  {
    title: '产品型号',
    type: 'inpute',
    model: 'filmName'
  }
]
let checkBoxOptions = [
  {
    label: '待签收',
    value: 0
  },
  {
    label: '已签收',
    value: 1
  },
  {
    label: '已拒收',
    value: 2
  }
]
let selectedRowsdata = []
const App = React.forwardRef((props, ref) => {
  const [messageApi, contextHolder] = message.useMessage()
  const handleChildMethod = () => {
    getList()
  }

  React.useImperativeHandle(ref, () => ({
    handleChildMethod
  }))
  const [dataSource, setDataSource] = useState([])
  const [isShowAdd, setIsShowAdd] = useState(false)
  const [isShowDetils, setisShowDetils] = useState(false)
  const [detilsData, setDetilsData] = useState({})
  const columns = [
    {
      title: '发货时间',
      dataIndex: 'create_time',
      align: 'center'
    },
    {
      title: '产品类型',
      dataIndex: 'filmType',
      align: 'center'
    },
    {
      title: '产品名称',
      dataIndex: 'filmName',
      align: 'center'
    },
    {
      title: '产品数量',
      dataIndex: 'number',
      align: 'center'
    },
    {
      title: '发货门店',
      dataIndex: 'colorAlterationNumber',
      align: 'center'
    },
    {
      title: '联系方式',
      align: 'center',
      render: (data) => {
        if (data.phone) {
          return <span> {data.phone}</span>
        } else {
          return <span>{data.customerServicePhone}</span>
        }
      }
    },
    {
      title: '负责人',
      dataIndex: 'linkman',
      align: 'center'
    },
    {
      title: '收货门店',
      dataIndex: 'storeName',
      align: 'center'
    },
    {
      title: '质保编号',
      dataIndex: 'filmNo',
      align: 'center'
    },
    {
      title: '质保年限',
      dataIndex: 'filmAge',
      align: 'center'
    },
    {
      title: '贴膜次数',
      dataIndex: 'count',
      align: 'center'
    },
    {
      title: '状态',
      dataIndex: 'deliverStatus',
      align: 'center',
      render: (deliverStatus) => {
        if (deliverStatus == 0) {
          return <div style={{ color: 'rgb(0,120,215)' }}> 待签收</div>
        } else if (deliverStatus == 1) {
          return <div> 已签收</div>
        } else {
          return <div style={{ color: '#FF3737' }}> 已拒收</div>
        }
      }
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (data) => (
        <Space size="middle">
          <Button
            onClick={() => {
              setisShowDetils(true)
              setDetilsData(data)
            }}
          >
            详情
          </Button>
          <Button
            type="primary"
            onClick={() => {
              showModalAdd(data)
              setDetilsData(data)
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title="删除"
            description="确定删除吗?"
            placement="top"
            onConfirm={() => {
              DeleteFn(data)
            }}
            onCancel={() => {
              message.error('取消删除')
            }}
            okText="是"
            cancelText="不"
          >
            <Button type="primary" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      )
    }
  ]
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      selectedRowsdata = selectedRows.map((item) => {
        return item._id
      })
    }
  }

  // 获取列表
  const getList = async () => {
    const res = await deliverList(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          create_time: dayjs(item.create_time).format('YYYY-MM-DD'),
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }
  const checkChangeFn = async (data) => {
    pageData.deliverStatus = data
    const res = await deliverListSerach(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }
  const showModalAdd = (value) => {
    if (value._id) {
      setDetilsData(value)
      _id = value._id
    }
    setIsShowAdd(true)
  }
  const pageChangeFn = async (page, pageSize) => {
    pageData.page = page
    pageData.size = pageSize
    const res = await deliverListSerach(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id,
          create_time: dayjs(item.create_time).format('YYYY-MM-DD')
        }
      })
    )
    pageData.total = res.data.total
  }
  // 删除
  const DeleteFn = async (data) => {
    const res = await deliverListDelete({ id: data._id })
    messageApi.success(res.data.message)
    getList()
  }
  // 导出
  const exportExcel = async () => {
    let data = {
      id: 'all',
      appid: localStorage.getItem('appid')
    }
    if (selectedRowsdata.length > 0) {
      data = {
        id: selectedRowsdata,
        appid: localStorage.getItem('appid')
      }
    }
    const res = await deliverListCreateExcel(data)
    const url = window.URL.createObjectURL(new Blob([res.data]))
    const a = document.createElement('a')
    a.href = url
    a.download = '发货记录.xlsx'
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
  }
  const porpsData = async (data) => {
    pageData = {
      page: 1,
      size: 10,
      total: 0,
      appid: localStorage.getItem('appid'),
      ...data
    }
    const res = await deliverListSerach(pageData)
    setDataSource(
      res.data.res.map((item) => {
        return {
          ...item,
          key: item._id
        }
      })
    )
    pageData.total = res.data.total
  }
  // 修改次数
  const changeCountFn = async () => {
    console.log(detilsData)
    // const res = await changeCount(detilsData)
    // messageApi.success(res.data.messge)
    // getList()
  }
  return (
    <div>
      <Card>
        <SearchView typeList={typeList} porpsData={porpsData}></SearchView>
        <div className="headerButton">
          <Checkbox.Group
            options={checkBoxOptions}
            defaultValue={['Pear']}
            onChange={checkChangeFn}
          />
          <div>
            <Button
              type="primary"
              onClick={() => {
                exportExcel()
              }}
            >
              导出发货信息
            </Button>
          </div>
        </div>
        <Table
          rowSelection={{
            type: 'checkbox',
            ...rowSelection
          }}
          pagination={false}
          bordered
          rowKey="key"
          columns={columns}
          dataSource={dataSource}
        />
        <div className="Pagin">
          <Pagination
            onChange={pageChangeFn}
            defaultCurrent={pageData.page}
            total={pageData.total}
          />
        </div>
      </Card>
      <div>
        <Modal
          footer={[]}
          onCancel={() => {
            setIsShowAdd(false)
          }}
          open={isShowAdd}
        >
          <div className="detilsBox">
            <div className="heder">
              <div className="hederSize align_center">
                <div>收货时间：{detilsData.timeOfReceipt}</div>
                <div>收货人：{detilsData.storeName}</div>
              </div>
              <div className="headerMinBox align_center">
                <div className="MinBox">
                  <div className="title">产品类型</div>
                  <div className="size">{detilsData.filmType}</div>
                </div>
                <div className="MinBox">
                  <div className="title">产品名称</div>
                  <div className="size">{detilsData.filmName}</div>
                </div>
                <div className="MinBox">
                  <div className="title">产品数量</div>
                  <div className="size">{detilsData.number}</div>
                </div>
              </div>
              <Divider style={{ margin: '15px 0' }} />
              <div className="headerfoot">
                <div className="title">
                  质保编号：<span className="size">{detilsData.filmNo}</span>
                </div>
                <div className="title">
                  质保年限：<span className="size">{detilsData.filmAge}</span>
                </div>
                <div className="title" style={{ display: 'flex' }}>
                  总贴膜次数：
                  <Input
                    style={{ width: '90px', height: '20px' }}
                    placeholder="请输入"
                    defaultValue={detilsData.count}
                    onChange={(data) => {
                      setDetilsData({
                        ...detilsData,
                        count: data.target.value
                      })
                    }}
                  />
                </div>
              </div>
            </div>
            <div className="centerBox">
              <div className="centerHeaderBox">
                <div className="header">已使用次数：{detilsData.useCount}</div>
                <div
                  className="headerMinBox align_center"
                  style={{ justifyContent: 'space-around' }}
                >
                  <div className="MinBox">
                    <div className="size">漆面膜</div>
                    <div className="size">{detilsData.filmName}</div>
                    <div className="size">{detilsData.uselacquerNumber}</div>
                  </div>
                  <div className="MinBox">
                    <div className="size">改色膜</div>
                    <div className="size">{detilsData.filmName}</div>
                    <div className="size">
                      {detilsData.usecolorAlterationNumber}
                    </div>
                  </div>
                  <div className="MinBox">
                    <div className="size">车顶膜</div>
                    <div className="size">{detilsData.filmName}</div>
                    <div className="size">{detilsData.useroofNumber}</div>
                  </div>
                  <div className="MinBox">
                    <div className="size">太阳膜</div>
                    <div className="size">{detilsData.filmName}</div>
                    <div className="size">{detilsData.usesunNumber}</div>
                  </div>
                </div>
              </div>
              <Divider style={{ margin: '15px 0' }} />
              <div className="centerHeaderBox">
                <div className="header">剩余次数：{detilsData.unUseCount}</div>
                <div
                  className="headerMinBox align_center"
                  style={{ justifyContent: 'space-around' }}
                >
                  <div className="MinBox">
                    <div className="size">漆面膜</div>
                    <div className="size">{detilsData.filmName}</div>
                    <div className="size">{detilsData.lacquerNumber}</div>
                  </div>
                  <div className="MinBox">
                    <div className="size">改色膜</div>
                    <div className="size">{detilsData.filmName}</div>
                    <div className="size">
                      {detilsData.colorAlterationNumber}
                    </div>
                  </div>
                  <div className="MinBox">
                    <div className="size">车顶膜</div>
                    <div className="size">{detilsData.filmName}</div>
                    <div className="size">{detilsData.roofNumber}</div>
                  </div>
                  <div className="MinBox">
                    <div className="size">太阳膜</div>
                    <div className="size">{detilsData.filmName}</div>
                    <div className="size">{detilsData.sunNumber}</div>
                  </div>
                </div>
              </div>
            </div>
            {detilsData.customerService ? (
              <div className="footBox">
                <div className="align_center">
                  <div className="footTitle">发货客服：</div>
                  <span className="footSize">{detilsData.customerService}</span>
                </div>
                <div className="align_center">
                  <div className="footTitle">联系方式：</div>
                  <span className="footSize">
                    {detilsData.customerServicePhone}
                  </span>
                </div>
                <Divider style={{ margin: '15px 0' }} />
                <div className="align_center">
                  <div className="footTitle">收货门店：</div>
                  <span className="footSize">{detilsData.storeName}</span>
                </div>
                <div className="align_center">
                  <div className="footTitle">收货人：</div>
                  <span className="footSize">{detilsData.linkman}</span>
                </div>
                <div className="align_center">
                  <div className="footTitle">联系方式：</div>
                  <span className="footSize">{detilsData.storePhone}</span>
                </div>
              </div>
            ) : (
              <div className="footBox">
                <div className="align_center">
                  <div className="footTitle">发货门店：</div>
                  <span className="footSize">
                    {detilsData.deliverStoreName}
                  </span>
                </div>

                <div className="align_center">
                  <div className="footTitle">联系方式：</div>
                  <span className="footSize">
                    {detilsData.deliverStorePhone}
                  </span>
                </div>
                <div className="align_center">
                  <div className="footTitle">发货时间：</div>
                  <span className="footSize">
                    {dayjs(detilsData.create_time).format('YYYY-MM-DD')}
                  </span>
                </div>

                <Divider style={{ margin: '15px 0' }} />
                <div className="align_center">
                  <div className="footTitle">收货门店：</div>
                  <span className="footSize">{detilsData.storeName}</span>
                </div>
                <div className="align_center">
                  <div className="footTitle">收货人：</div>
                  <span className="footSize">{detilsData.linkman}</span>
                </div>
                <div className="align_center">
                  <div className="footTitle">联系方式：</div>
                  <span className="footSize">{detilsData.storePhone}</span>
                </div>
              </div>
            )}
          </div>
          <div className="footButtonBox">
            <div
              className="footButtonCancel center"
              onClick={() => {
                setIsShowAdd(false)
              }}
            >
              取消
            </div>
            <div
              className="footButton center"
              style={{ width: '152px' }}
              onClick={() => {
                setIsShowAdd(false)
                changeCountFn()
              }}
            >
              确定
            </div>
          </div>
        </Modal>
      </div>
      <Modal
        title="详情"
        open={isShowDetils}
        footer={[]}
        onCancel={() => {
          setisShowDetils(false)
        }}
      >
        <div className="detilsBox">
          <div className="heder">
            <div className="hederSize align_center">
              <div>收货时间：{detilsData.timeOfReceipt}</div>
              <div>收货人：{detilsData.storeName}</div>
            </div>
            <div className="headerMinBox align_center">
              <div className="MinBox">
                <div className="title">产品类型</div>
                <div className="size">{detilsData.filmType}</div>
              </div>
              <div className="MinBox">
                <div className="title">产品名称</div>
                <div className="size">{detilsData.filmName}</div>
              </div>
              <div className="MinBox">
                <div className="title">产品数量</div>
                <div className="size">{detilsData.number}</div>
              </div>
            </div>
            <Divider style={{ margin: '15px 0' }} />
            <div className="headerfoot">
              <div className="title">
                质保编号：<span className="size">{detilsData.filmNo}</span>
              </div>
              <div className="title">
                质保年限：<span className="size">{detilsData.filmAge}</span>
              </div>
              <div className="title">
                总贴膜次数：<span className="size2">{detilsData.count}</span>
              </div>
            </div>
          </div>
          <div className="centerBox">
            <div className="centerHeaderBox">
              <div className="header">已使用次数：{detilsData.useCount}</div>
              <div
                className="headerMinBox align_center"
                style={{ justifyContent: 'space-around' }}
              >
                <div className="MinBox">
                  <div className="size">漆面膜</div>
                  <div className="size">{detilsData.filmName}</div>
                  <div className="size">{detilsData.uselacquerNumber}</div>
                </div>
                <div className="MinBox">
                  <div className="size">改色膜</div>
                  <div className="size">{detilsData.filmName}</div>
                  <div className="size">
                    {detilsData.usecolorAlterationNumber}
                  </div>
                </div>
                <div className="MinBox">
                  <div className="size">车顶膜</div>
                  <div className="size">{detilsData.filmName}</div>
                  <div className="size">{detilsData.useroofNumber}</div>
                </div>
                <div className="MinBox">
                  <div className="size">太阳膜</div>
                  <div className="size">{detilsData.filmName}</div>
                  <div className="size">{detilsData.usesunNumber}</div>
                </div>
              </div>
            </div>
            <Divider style={{ margin: '15px 0' }} />
            <div className="centerHeaderBox">
              <div className="header">剩余次数：{detilsData.unUseCount}</div>
              <div
                className="headerMinBox align_center"
                style={{ justifyContent: 'space-around' }}
              >
                <div className="MinBox">
                  <div className="size">漆面膜</div>
                  <div className="size">{detilsData.filmName}</div>
                  <div className="size">{detilsData.lacquerNumber}</div>
                </div>
                <div className="MinBox">
                  <div className="size">改色膜</div>
                  <div className="size">{detilsData.filmName}</div>
                  <div className="size">{detilsData.colorAlterationNumber}</div>
                </div>
                <div className="MinBox">
                  <div className="size">车顶膜</div>
                  <div className="size">{detilsData.filmName}</div>
                  <div className="size">{detilsData.roofNumber}</div>
                </div>
                <div className="MinBox">
                  <div className="size">太阳膜</div>
                  <div className="size">{detilsData.filmName}</div>
                  <div className="size">{detilsData.sunNumber}</div>
                </div>
              </div>
            </div>
          </div>
          {detilsData.customerService ? (
            <div className="footBox">
              <div className="align_center">
                <div className="footTitle">发货客服：</div>
                <span className="footSize">{detilsData.customerService}</span>
              </div>
              <div className="align_center">
                <div className="footTitle">联系方式：</div>
                <span className="footSize">
                  {detilsData.customerServicePhone}
                </span>
              </div>
              <Divider style={{ margin: '15px 0' }} />
              <div className="align_center">
                <div className="footTitle">收货门店：</div>
                <span className="footSize">{detilsData.storeName}</span>
              </div>
              <div className="align_center">
                <div className="footTitle">收货人：</div>
                <span className="footSize">{detilsData.linkman}</span>
              </div>
              <div className="align_center">
                <div className="footTitle">联系方式：</div>
                <span className="footSize">{detilsData.storePhone}</span>
              </div>
            </div>
          ) : (
            <div className="footBox">
              <div className="align_center">
                <div className="footTitle">发货门店：</div>
                <span className="footSize">{detilsData.deliverStoreName}</span>
              </div>
              <div className="align_center">
                <div className="footTitle">联系方式：</div>
                <span className="footSize">{detilsData.deliverStorePhone}</span>
              </div>
              <div className="align_center">
                <div className="footTitle">发货时间：</div>
                <span className="footSize">
                  {dayjs(detilsData.create_time).format('YYYY-MM-DD')}
                </span>
              </div>

              <Divider style={{ margin: '15px 0' }} />
              <div className="align_center">
                <div className="footTitle">收货门店：</div>
                <span className="footSize">{detilsData.storeName}</span>
              </div>
              <div className="align_center">
                <div className="footTitle">收货人：</div>
                <span className="footSize">{detilsData.linkman}</span>
              </div>
              <div className="align_center">
                <div className="footTitle">联系方式：</div>
                <span className="footSize">{detilsData.storePhone}</span>
              </div>
            </div>
          )}
        </div>
        <div className="center">
          <div
            className="footButton center"
            onClick={() => {
              setisShowDetils(false)
            }}
          >
            确定
          </div>
        </div>
      </Modal>
      {contextHolder}
    </div>
  )
})
export default App
